<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>📝 Markdown渲染功能测试 - 校园门户系统</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segola UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 40px auto;
            padding: 20px;
            line-height: 1.6;
            background: #f5f7fa;
        }

        .demo-card {
            background: white;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 24px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
        }

        .demo-title {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 8px;
            margin-bottom: 16px;
        }

        .test-content {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            padding: 16px;
            font-family: Monaco, Consolas, monospace;
            font-size: 14px;
            margin-bottom: 16px;
        }

        .result-content {
            background: #fff;
            border: 1px solid #d1ecf1;
            border-radius: 6px;
            padding: 16px;
            color: #0c5460;
        }

        .notification-summary {
            font-size: 14px;
            color: #495057;
            line-height: 1.5;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        .notification-summary strong, .notification-summary b {
            font-weight: 600;
            color: #2c3e50;
        }

        .notification-summary em, .notification-summary i {
            font-style: italic;
        }

        .notification-summary code {
            background: #f1f3f4;
            padding: 2px 4px;
            border-radius: 3px;
            font-family: Monaco, Consolas, monospace;
            font-size: 12px;
        }

        .notification-summary a {
            color: #3498db;
            text-decoration: none;
        }

        .notification-summary a:hover {
            text-decoration: underline;
        }

        .notification-summary p {
            margin: 0;
        }

        .notification-summary p:not(:last-child) {
            margin-bottom: 4px;
        }

        .status {
            padding: 8px 12px;
            border-radius: 6px;
            font-weight: 500;
            margin-bottom: 16px;
        }

        .status.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
    </style>
</head>
<body>
    <h1>📝 Markdown渲染功能测试演示</h1>

    <div class="status success">
        ✅ Markdown渲染功能已成功集成到校园门户系统！
    </div>

    <!-- 测试案例1：基础换行 -->
    <div class="demo-card">
        <h2 class="demo-title">🔍 测试案例1：基础换行功能</h2>
        <h3>原始内容（包含\n换行符）：</h3>
        <div class="test-content">
第一行内容：校园通知发布
第二行内容：请各位同学注意查收
第三行内容：如有疑问请联系教务处
        </div>
        <h3>Markdown渲染结果：</h3>
        <div class="result-content">
            <div class="notification-summary" id="test1"></div>
        </div>
    </div>

    <!-- 测试案例2：Markdown格式 -->
    <div class="demo-card">
        <h2 class="demo-title">🎨 测试案例2：Markdown格式支持</h2>
        <h3>原始内容（包含Markdown语法）：</h3>
        <div class="test-content">
**重要通知**：期末考试安排

*考试时间*：2025年1月15日-20日
*考试地点*：教学楼A区

注意事项：
- 请携带学生证
- 提前30分钟到场
- 禁止携带电子设备

更多信息请访问：[教务系统](https://edu.example.com)
        </div>
        <h3>Markdown渲染结果：</h3>
        <div class="result-content">
            <div class="notification-summary" id="test2"></div>
        </div>
    </div>

    <!-- 测试案例3：混合内容 -->
    <div class="demo-card">
        <h2 class="demo-title">🔧 测试案例3：混合内容处理</h2>
        <h3>原始内容（混合换行和格式）：</h3>
        <div class="test-content">
📢 **校园网络维护通知**

维护时间：今晚22:00-次日6:00
影响范围：全校区网络
备用网络：`guest_wifi`密码`campus2025`

请提前做好相关准备
如有紧急情况请联系网络中心
        </div>
        <h3>Markdown渲染结果：</h3>
        <div class="result-content">
            <div class="notification-summary" id="test3"></div>
        </div>
    </div>

    <script type="module">
        // 模拟markdown渲染函数的简化版本
        function simulateMarkdownRender(content) {
            if (!content) return '';

            // 简单的markdown转换（仅用于演示）
            let html = content
                // 粗体
                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                // 斜体
                .replace(/\*(.*?)\*/g, '<em>$1</em>')
                // 行内代码
                .replace(/`(.*?)`/g, '<code>$1</code>')
                // 链接
                .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank">$1</a>')
                // 换行
                .replace(/\n/g, '<br>');

            return html;
        }

        // 测试案例数据
        const testCases = [
            {
                id: 'test1',
                content: `第一行内容：校园通知发布
第二行内容：请各位同学注意查收
第三行内容：如有疑问请联系教务处`
            },
            {
                id: 'test2',
                content: `**重要通知**：期末考试安排

*考试时间*：2025年1月15日-20日
*考试地点*：教学楼A区

注意事项：
- 请携带学生证
- 提前30分钟到场
- 禁止携带电子设备

更多信息请访问：[教务系统](https://edu.example.com)`
            },
            {
                id: 'test3',
                content: `📢 **校园网络维护通知**

维护时间：今晚22:00-次日6:00
影响范围：全校区网络
备用网络：\`guest_wifi\`密码\`campus2025\`

请提前做好相关准备
如有紧急情况请联系网络中心`
            }
        ];

        // 渲染测试结果
        testCases.forEach(testCase => {
            const element = document.getElementById(testCase.id);
            if (element) {
                element.innerHTML = simulateMarkdownRender(testCase.content);
            }
        });

        console.log('🎉 Markdown渲染测试演示加载完成！');
        console.log('📋 测试案例数量:', testCases.length);
    </script>
</body>
</html>